import api from '@/api'
import FormFooter from '@/components/page/FormFooter'
import ManagePage from '@/components/page/ManagePage'
import tableAddition from '@/components/page/PageTable/addition'
import RowExtInfo from '@/components/table/RowExtInfo'
import util from '@/util'
import { IconColumnsStroked, IconDeleteStroked, IconEdit2Stroked, IconMore } from '@douyinfe/semi-icons'
import { Button, Dropdown, Form, Modal, SideSheet, Space, Toast } from '@douyinfe/semi-ui'
import { useEffect, useState } from 'react'
import useStateRef from 'react-usestateref'

export default () => {
  const [query, setQuery] = useState({})
  const [${entityObj}s, set${entityName}s] = useState([])
  const [page, setPage, pageRef] = useStateRef({ pageSize: 20 })
  const [queryBtnLoading, setQueryBtnLoading] = useState(false)
  const [dataLoading, setDataLoading] = useState(false)
  const [editVisible, setEditVisible] = useState(false)
  const [submitLoading, setSubmitLoading] = useState(false)
  const [${entityObj}, set${entityName}] = useState({})

  const [modal, contextHolder] = Modal.useModal()

  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = () => {
    setDataLoading(true)
    api.page${entityName}(pageRef.current.currentPage, pageRef.current.pageSize, query, sorts)
      .then(res => {
        set${entityName}s(res?.data?.records ?? [])
        setPage(util.resPage(res))
        setDataLoading(false)
        setQueryBtnLoading(false)
      }).catch(() => {
        setDataLoading(false)
        setQueryBtnLoading(false)
      })
  }

  const onSearch = () => {
    fetchData()
  }

  const onAdd = () => {
    set${entityName}({})
    setEditVisible(true)
  }

  const onQueryChange = (query) => {
    if (util.isEmptyObj(query)) {
      setQuery({})
    } else if (util.isNotEmptyObj(query)) {
      setQuery(query)
    }
  }
  const onQuerySubmit = (query) => {
    setQuery(query)
    setQueryBtnLoading(true)
    fetchData()
  }
  const onQueryReset = () => {
    setQuery({})
  }
  const onPageChange = (currentPage, pageSize) => {
    setPage({ ...page, currentPage, pageSize })
    fetchData()
  }

  const onModify = (${entityObj}) => {
    set${entityName}(${entityObj})
    setEditVisible(true)
  }

  const save${entityName} = () => {
    setSubmitLoading(true)
    api.save${entityName}(${entityObj})
      .then(() => {
      Toast.success('${comment}已保存')
      setSubmitLoading(false)
      setEditVisible(false)
      fetchData()
    }).catch(() => {
      setSubmitLoading(false)
    })
}

const delete${entityName} = (id) => {
  modal.confirm({
    title: '删除',
    content: '确认删除此${comment}吗？',
    onOk: () => {
      api.delete${entityName}(id)
        .then(() => {
          Toast.success('${comment}已删除')
          fetchData()
        })
    }
  })
}

return (
  <>
    <ManagePage
      title='${comment}'
      optProps={{
        onSearch,
        onAdd
      }}
      queryProps={{
        visible: true,
        query,
        queryComponent: <${entityName}QueryForm />,
        onQueryChange,
        onQuerySubmit,
        onQueryReset
      }}
      dataTable={{
        columns: [
          tableAddition.indexColumn(),
          {
            title: '操作', dataIndex: 'id', fixed: true, width: 160, render: (id, record) =>
              <Space>
                <Button theme='borderless' size='small' title='修改' icon={<IconEdit2Stroked />} onClick={() => onModify(record)} />
                <Button theme='borderless' size='small' title='删除' icon={<IconDeleteStroked />} onClick={() => delete${entityName}(id)} />
                <RowExtInfo id={id} record={record} />
                <Dropdown
                  position='rightTop'
                  render={
                    <Dropdown.Menu>
                      <Dropdown.Item onClick={() => { }}>
                        <IconColumnsStroked />设置
                      </Dropdown.Item>
                    </Dropdown.Menu>
                  }>
                  <Button theme='borderless' size='small' icon={<IconMore />} />
                </Dropdown>
              </Space>
          },
          { title: '名称', dataIndex: 'name', fixed: true, width: 180, sortable: true },
        ],
        bordered: true,
        resizable: true,
        dataSource: ${entityObj}s,
    pagination: page,
    onPageChange
        }}
    loadingProps={{
      queryBtnLoading,
      dataLoading
    }}
      />
    <SideSheet
      title='编辑${comment}'
      headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
      bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
      visible={editVisible}
      onCancel={() => setEditVisible(false)}
      footer={<FormFooter onCancel={() => setEditVisible(false)} onSubmit={save${entityName}} submitLoading={submitLoading} />}>
    <Form initValues={${entityObj}} onValueChange={val => set${entityName}(val)}>
    <Form.Input showClear field='name' label={{ text: '名称', required: true }} placeholder='请输入名称' />
  </Form >
      </SideSheet >
  { contextHolder }
    </>
  )
}

const DataModelQueryForm = () => {
  return (
    <>
      <Form.Input showClear field='keyword' label='关键字' placeholder='请输入查找关键字' />
    </>
  )
}